<template>
  <!-- 消息通知组件 -->
  <div id="notify">
    <!-- 标签栏 -->
    <nav class="notifyHeader">
      <!-- 系统通知 -->
      <div
        :style="
          nowNotifyType === 1 && 'background-color: #e3f4fd;color: #0182c7;'
        "
        @click="setNotifyType(1)"
      >
        <i class="iconfont icon-xitongtongzhi"></i>
      </div>
      <!-- 关注 -->
      <div
        :style="
          nowNotifyType === 2 && 'background-color: #e3f4fd;color: #0182c7;'
        "
        @click="setNotifyType(2)"
      >
        <i class="iconfont icon-guanzhu"></i>
      </div>
      <!-- 评论 -->
      <div
        :style="
          nowNotifyType === 3 && 'background-color: #e3f4fd;color: #0182c7;'
        "
        @click="setNotifyType(3)"
      >
        <i class="iconfont icon-pinglun"></i>
      </div>
      <!-- 点赞 -->
      <div
        :style="
          nowNotifyType === 4 && 'background-color: #e3f4fd;color: #0182c7;'
        "
        @click="setNotifyType(4)"
      >
        <i class="iconfont icon-dianzan1"></i>
      </div>
      <!-- 收藏 -->
      <div
        :style="
          nowNotifyType === 5 && 'background-color: #e3f4fd;color: #0182c7;'
        "
        @click="setNotifyType(5)"
      >
        <i class="iconfont icon-shoucang"></i>
      </div>
    </nav>
    <!-- 通知内容 -->
    <!-- 系统通知 -->
    <div class="notifyContent" v-if="nowNotifyType === 1">
      <ul>
        <li>欢迎使用氢记笔记</li>
      </ul>
    </div>
    <!-- 关注 -->
    <div class="notifyContent" v-if="nowNotifyType === 2">
      <ul>
        <li>
          <span>用户</span><span class="userNick">飞鱼</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">优游</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">陈陈</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">小鱼儿游大海</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">仰望、慕辰</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">那后来还是我们吗？</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">Lazaro是科研狗</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">七彩辣椒</span
          ><span>关注了您</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">Liz</span
          ><span>关注了您</span>
        </li>
      </ul>
    </div>
    <!-- 评论 -->
    <div class="notifyContent" v-if="nowNotifyType === 3">
      <ul>
        <li>
          <span>用户</span><span class="userNick">超人不会飞</span
          ><span>评论了您的笔记</span
          ><span class="noteTitle">英语四六级备考攻略</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">长白的小蘑菇</span
          ><span>评论了您的笔记</span
          ><span class="noteTitle">高品质睡前故事</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">好喜欢生菜</span
          ><span>评论了您的笔记</span
          ><span class="noteTitle">无关爱情的温柔文案</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">不吃胡萝卜</span
          ><span>评论了您的笔记</span
          ><span class="noteTitle">大学生必看书单</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">兔兔那么可爱</span
          ><span>评论了您的笔记</span
          ><span class="noteTitle">越早明白越好的人生道理</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">西了个瓜</span
          ><span>评论了您的笔记</span
          ><span class="noteTitle">小众又高级的礼物清单</span>
        </li>
      </ul>
    </div>
    <!-- 点赞 -->
    <div class="notifyContent" v-if="nowNotifyType === 4">
      <ul>
        <li>
          <span>用户</span><span class="userNick">Echo</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之音视频播放</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">兔兔吃糖糖</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之音视频播放</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">chenchenc</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之垂直方向的布局</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">小婉儿同学</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之音视频播放</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">从一道光开始</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之粘滞定位</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">罄竹难书</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之盒子的大小</span>
        </li>
      </ul>
    </div>
    <!-- 收藏 -->
    <div class="notifyContent" v-if="nowNotifyType === 5">
      <ul>
        <li>
          <span>用户</span><span class="userNick">听见流浪</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之轮廓阴影和圆角</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">上岸后空闲的玩家</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之绝对定位元素的位置</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">卡布先生</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之水平方向的布局</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">从这束花开始</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之水平方向的布局</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">开心的大西瓜</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之图标字体</span>
        </li>
        <li>
          <span>用户</span><span class="userNick">灵溪拾忆素材分享</span
          ><span>点赞了您的笔记</span
          ><span class="noteTitle">html5笔记之水平方向的布局</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Notify",
  data() {
    return {
      // 当前通知类型
      nowNotifyType: 1,
    };
  },
  methods: {
    setNotifyType(index) {
      if (this.nowNotifyType !== index) {
        this.nowNotifyType = index;
      }
    },
  },
};
</script>

<style lang="less" scoped>
#notify {
  width: 380px;
  height: 0;
  position: absolute;
  // right: 20px;
  top: 52px;
  transform: translateX(-50%);
  background-color: white;
  // 层级
  // z-index: 10;
  // 动画
  transition: height 100ms ease-in-out 0s;
  // 阴影
  box-shadow: 0 0 15px #cccccc;
  overflow: hidden;
  border-radius: 5px;
  .notifyHeader {
    width: 100%;
    height: 40px;
    // background-color: a;
    display: flex;
    border-bottom: #cccccc solid 1px;
    div {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .iconfont {
        font-size: 20px;
      }
      &:hover {
        background-color: #e3f4fd;
        color: #0182c7;
      }
    }
  }
  .notifyContent {
    width: 100%;
    height: 159px;
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: auto;
      height: 100%;
      li {
        width: 90%;
        // background-color: aqua;
        // display: flex;
        // align-items: center;
        border-bottom: #ddd solid 1px;
        font-size: 14px;
        color: #3c3c3c;
        padding: 10px 0;
        // 用户名
        .userNick,
        .noteTitle {
          color: #0182c7;
          cursor: pointer;
          padding: 0 10px;
        }
        // &:last-of-type {
        //   border-bottom: none;
        // }
      }
    }
  }
}
@media (max-width: 1248px) {
  #notify {
    position: fixed;
    transform: translateX(0);
    right: 5px;
    top: 62px;
  }
}
@media (max-width: 380px) {
  #notify {
    width: 300px;
  }
}
</style>